<template>
    <orh-table reload @on-reload="reload(1)" pages :pageDate="pageDate" @on-page-change="reload(1)">
        <Select v-model="type" size="small" slot="returntosuperior" style="width:120px">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>

        <DatePicker type="daterange" transfer placement="bottom-start" @on-change="deteChange" size="small" placeholder="请选择日期" slot="returntosuperior" style="width: 200px;margin-left: 10px;"></DatePicker>

        <Button size="small" slot="returntosuperior" @click="reload(1)" style="margin-left: 10px;" type="info">查找</Button>

        <Table border stripe :data="data" :columns="columns" highlight-row :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" :checkid="checkid" @requery="requery"></component>
        </orh-sidebar>
    </orh-table>
</template>
                
<script>
export default {
    name: 'dutymodule-schooldutydata',
    components: {
        CheckData: resolve => {require(['./CheckData.vue'], resolve);}
    },
    
    data () {
        return {
            show: false,
            content: null,
            titles: null,
            tableload:false,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data: [],
            columns: [
                {
                    title: '值班人',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.user_info.name.zh
                        return h('div', name)
                    }
                },
                {
                    title: '检查项',
                    minWidth: 250,
                    align: 'center',
                    className: 'checks',
                    render: (h, params) => {
                        let lists = params.row.checks
                        return h('div', lists.map((el, q) => {
                            let state = el.status
                            return h('div', {
                                style: {
                                    height: '40px',
                                    display: 'flex',
                                    borderTop: q === 0 ? '0' : '1px solid #e9eaec'
                                }
                            }, [
                                h('div', {
                                    style: {
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e9eaec'
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                            disabled: state === 0 ? true : false
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.checkid = el.watchlists_check_id
                                                this.condition = params.row.watchlists_base_data_id
                                                this.titles = `查看 - ${el.name}`
                                                this.show = true
                                                this.content = 'CheckData'
                                            }
                                        }
                                    }, el.name)
                                ]),
                                h('div', {
                                    style: {
                                        color: state === 0 ? '#ff9900' : '#19be6b',
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        maxWidth: '80px'
                                    }
                                }, state === 0 ? '未检查' : '已检查')
                            ])
                        }))
                    }
                },
                {
                    title: '值班时间',
                    width: 150,
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        let state = params.row.checks.find(el => el.status === 1)
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small',
                                    disabled: state ? false : true
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.chaeckData(params.row.watchlists_base_data_id)
                                    }
                                }
                            }, '查看')
                        ]);
                    }
                }
            ],

            url: 'api/watchlists/v1/securitydata/list',
            // urls: 'api/watchlists/v1/securitydata/allExcWatchlistsData',

            uurl: 'api/watchlists/v1/securitydata/auditing',

            condition: false,

            checkid: null,

            type: 0,
            typeList: [
                {
                    label: '所有数据',
                    value: 0
                },
                {
                    label: '异常值班数据',
                    value: 1
                },
                {
                    label: '已检查数据',
                    value: 2
                },
                {
                    label: '未检查数据',
                    value: 3
                }
            ],
            start_date: null,
            ent_date: null,
            onedate: null
        }
    },

    methods: {
        deteChange (date) {
            this.onedate = null
            this.start_date = null
            this.ent_date = null
            if (date[0]) {
                let start = JSON.parse(date[0].split('-').join(''))
                let end = JSON.parse(date[1].split('-').join(''))
                if (start === end) {
                    this.onedate = date[0]
                } else {
                    this.start_date = date[0]
                    this.ent_date = date[1]
                }
            }
        },
        
        /************************************************************
         * 
         * 当添加或修改数据成功后重新请求数据
         * @param   {state}           添加修改成功后返回状态
         * 
         ************************************************************/
        requery (state) {
            if(state == true){
                this.show = false
                this.reload (this.pageDate.current_page)
            }
        },
        
        /************************************************************
         * 
         * 查看数据
         * @param   {index}           要修改的数据id
         * 
         ************************************************************/
        chaeckData (index) {
            this.checkid = false
            this.condition = index
            this.titles = '查看'
            this.show = true
            this.content = 'CheckData'
        },
        
        /************************************************************
         * 
         * 手动刷新
         * 
         ************************************************************/
        reload (index) {
            this.data = []
            this.tableload = true
            this.queryData (index)
        },
        
        
        /************************************************************
         * 
         * 反馈
         * 
         ************************************************************/
        fankuiData (index, value) {
            let params = {
                base_id: index,
                auditing: value
            }
            this.$http.get(this.uurl, { params }).then(val=>{
                this.reload (this.pageDate.current_page)
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 查询数据（所有）
         * 
         ************************************************************/
        queryData (index) {
            this.tableload = true;
            let params = {
                type: this.type,
                page: index
            }
            this.$http.get('api/watchlists/v1/securitydata/list', { params }).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        }
    },
    created () {
        this.queryData (1)
    },
}
</script>

